<template>
  <div class="box">
    <el-container>
      <!-- Header -->
      <el-header>
        <span>教师信息审核列表</span>
      </el-header>
      <el-container>
        <!-- Slide -->
        <el-aside width="200px">
          <el-input placeholder="请输入机构关键词" v-model="filterText">
          </el-input>
          <el-tree
            class="filter-tree"
            :data="treedata"
            :props="defaultProps"
            accordion
            node-key="id"
            :default-expanded-keys="[1]"
            :filter-node-method="filterNode"
            ref="tree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                <!--   data.icon为data里的icon属性，用于识别icon图片 -->
                <icon-svg v-show="!node.expanded && node.childNodes.length>0" name="folder-open" class="el-folder"></icon-svg>
                <icon-svg v-show="node.expanded  && node.childNodes.length>0" name="folder-close" class="el-folder"></icon-svg>
                <icon-svg v-show="node.childNodes.length==0" name="room" class="el-folder"></icon-svg>
                <span @click="foldercllick(node,data)">{{ node.label }}</span>
              </span>
            </span>
          </el-tree>
        </el-aside>
        <!-- Main -->
        <el-main>
          <el-row>
            <el-form
              :model="formModel"
              ref="formModel"
              label-width="90px"
              class="demo-formModel"
            >
              <el-col :span="5">
                <el-form-item label="教师类别">
                  <el-select v-model="formModel.jslb" placeholder="请选择" class="el_select2">
                  <el-option
                    v-for="item in teachtypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="姓名">
                  <el-input v-model="formModel.xm" placeholder="请输入姓名" class="el_select2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="电话">
                  <el-input v-model="formModel.sj" placeholder="请输入电话" class="el_select2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" style="text-align:right;">
                <el-button type="primary" size="small">查询</el-button>
                <el-button type="default" class="btn_default" size="small" @click="rest_query">重置</el-button>


                <el-button type="primary" size="small" @click="batch">批量审核</el-button>
              </el-col>
            </el-form>
            
          </el-row>
          <el-table :data="tableData" :stripe="true" style="width: 100%">
            <el-table-column
            align="center"
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column label="序号" type="index" width="50" align="center">
            </el-table-column>
            <el-table-column label="姓名" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.xm }}</span>
                
              </template>
            </el-table-column>
            <el-table-column label="性别" align="center">
              <template slot-scope="scope">
                <span>{{ get_sexname(scope.row.xb) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="出生日期" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.csrj }}</span>
              </template>
            </el-table-column>
            <el-table-column label="籍贯" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.jg }}</span>
              </template>
            </el-table-column>

            <el-table-column label="出生地" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.csdz }}</span>
              </template>
            </el-table-column>
            <el-table-column label="名族" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.mz }}</span>
              </template>
            </el-table-column>
            <el-table-column label="政治面貌" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.zzmm }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >审核</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>

    <!-- 审核 -->
    <el-dialog title="审核" :visible.sync="dialogFormVisible" class="dialogFormVisible">
      <!-- 原因 -->
          <el-row>
            <el-col :span="24">
              <span>原因</span>
                <el-input type="textarea" v-model="remark" style="width:92%;"></el-input>
              </el-form-item>
            </el-col>
            
          </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleRes(1)">审核通过</el-button>
        <el-button type="primary" @click="handleRes(10)"
          >审核不通过</el-button
        >
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name:"examine-list",
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  data() {
    return {
      dialogFormVisible:false,
      tableData: [],
      filterText: "",
      treeicon:"",
      treedata: [],
      defaultProps: {
          children: 'children',
          label: 'name'
        },
        formModel:{
          jgId:"",
          jslb:"",
          xm:"",
          sj:"",
        },
        remark:"",
        row:"",
        teachtypeList:[],
        sexlist:[
          {name:"未知",val:0},
          {name:"男",val:1},
          {name:"女",val:2},
        ]
    };
  },
  mounted () {
    this.get_t_typelist();
  },
  methods: {
    get_sexname(val){
      var name="";
      for(var i=0;i<this.sexlist.length;i++){
        if(val==this.sexlist[i].val){
          name=this.sexlist[i].name;
          break;
        }
      }
      return name;
    },
    //教师类别列表
    get_t_typelist(){
      this.$http({
              url: this.$http.adornUrl('jslb/list'),
              method: 'get',
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.teachtypeList=data.data.list;
                this.initdata();
              } else {
                this.$message.error(data.msg)
          }
      })
      this.get_jg_list();
    },
    //获取结构列表数据
    get_jg_list(){
      this.$http({
              url: this.$http.adornUrl('jg/tree'),
              method: 'get',
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.treedata=data.data;
              } else {
                this.$message.error(data.msg)
          }
      })
    },
    initdata(){
      //列表数据
      this.$http({
              url: this.$http.adornUrl('js/examineList'),
              method: 'get',
              data: this.$http.adornData(this.formModel)
            }).then(({data}) => {
              console.log(data.data);
              if (data && data.code === 0) {
                this.tableData=data.data.list;
              } else {
                this.$message.error(data.msg)
          }
      })
    },
   
    //批量录入
    batch() {
      // this.dialogFormVisible=true;
    },
    //重置查询
    rest_query(){
      this.formModel.jgId="";
      this.formModel.jslb="";
      this.formModel.xm="";
      this.formModel.sj="";
      this.initdata();
    },
    
    filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
    handleNodeClick(data) {
      console.log(data);
    },
    foldercllick(node,date){
      // console.log(node);
      console.log(date.id);
      this.formModel.jgId=data.id;
    },
    //审核(open)
    handleEdit(index, row) {
      this.dialogFormVisible=true;
      console.log(row);
      this.row=row;
      // this.$http({
      //         url: this.$http.adornUrl('js/verify'),
      //         method: 'post',
      //       }).then(({data}) => {
      //         if (data && data.code === 0) {
      //           this.teachtypeList=data.data.list;
      //           this.initdata();
      //         } else {
      //           this.$message.error(data.msg)
      //     }
      // })
    },
    //审核
    handleRes(index) {
      // var id=JSON.parse(this.row.id);
      var id=this.row.id;
      var params={
        jsId:id,
        isVerify:index==1,
        remark:this.remark,
      };
      var formdata=new FormData();
      formdata.append("jsId",id);
      formdata.append("isVerify",index);
      formdata.append("remark",this.remark);
      this.$http({
              url: this.$http.adornUrl('js/verify'),
              method: 'post',
              data: formdata
            }).then(({data}) => {
              console.log(data);
              if (data && data.code === 0) {
                this.$message.success(data.msg)
                this.dialogFormVisible=false;
              } else {
                this.$message.error(data.msg)
          }
      })
    },
   
  },
};
</script>

<style scoped>
.box{
  height:100%;
}
.el-header,
.el-footer {
  /* background-color: #B3C0D1; */
  color: #333;
  text-align: start;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
}

.el-aside {
  /* background-color: #D3DCE6; */
  color: #333;
  text-align: center;
  padding: 0px 1rem;
  padding-top: 1rem;
  border-right: 1px solid #ccc;
  height: 38rem;
}

.el-main {
  /* background-color: #E9EEF3; */
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

body > .el-container {
  margin-bottom: 40px;
}

.custom-tree .el-tree-node__expand-icon{
  display: none;
}

.el-folder{
  color: blue;
}
.el_select2{
  width:8rem !important;
}
.btn_default{
  background:#fff;
  color:#000;
  border:1px solid #ccc;
}
</style>
